<template>
  <div class="cell">
    <el-button type="primary">
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
export default {
  computed: {
    type () {
      return this.active ? 'danger' : 'primary'
    }
  }
}
</script>

<style lang="less" scoped>
.cell {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100px;
  height: 60px;
  // border: 1px solid #aaa;
  margin-right: -1px;
  margin-bottom: -1px;
  // font-size: 20px;
  .el-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.cell:nth-child(8n) {
  margin-right: 0;
}
.cell-move {
  transition: transform 0.3s;
}
.cell-enter-active,
.cell-leave-active {
  transition: all 2s;
}
.cell-enter, .cell-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
